<template>
  <el-tabs tab-position="top" type="border-card" style="height: 400px;" active-name="statusOne" @tab-click="changePage">
    <el-tab-pane label="待收货" name="statusOne">
      <div v-if="OneData.length === 0">
        <el-empty description="暂无更多订单信息"></el-empty>
      </div>
      <div v-else>
        <el-table
            :data="OneData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe>

          <el-table-column
              prop="orderId"
              label="订单号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="posPhone"
              label="联系电话"
              width="150"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="porName"
              label="收件人"
              width="120"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="createDate"
              label="创建日期"
              width="200">
            <template slot-scope="scope">
              <el-text>{{scope.row.createDate | dateFilter}}</el-text>
            </template>
          </el-table-column>
          <el-table-column
              prop="price"
              label="快递费用"
              width="120"
              show-overflow-tooltip>
          </el-table-column>

          <el-table-column
              prop="icon"
              label="操作">

            <template slot-scope="scope">
              <el-button type="text" @click="changeStatus(scope.row.orderId, 4)">取消订单</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" @click="changeStatus(scope.row.orderId, 3)">确定收货</el-button>
              <el-divider direction="vertical"></el-divider>
              <router-link :to="{
                path: '/mew/orderdetail',
                query: {
                  orderId: scope.row.orderId
                }
              }">
                <el-button type="text">详情</el-button>
              </router-link>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="已签收" name="statusTwo">
      <div v-if="TwoData.length === 0">
        <el-empty description="暂无更多订单信息"></el-empty>
      </div>
      <div v-else>
        <el-table
            :data="TwoData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe>

          <el-table-column
              prop="orderId"
              label="订单号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="posPhone"
              label="联系电话"
              width="150"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="porName"
              label="收件人"
              width="120"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="createDate"
              label="创建日期"
              width="200">
            <template slot-scope="scope">
              <el-text>{{scope.row.createDate | dateFilter}}</el-text>
            </template>
          </el-table-column>
          <el-table-column
              prop="price"
              label="快递费用"
              width="120"
              show-overflow-tooltip>
          </el-table-column>

          <el-table-column
              prop="icon"
              label="操作">

            <template slot-scope="scope">
              <router-link :to="{
                path: '/mew/orderdetail',
                query: {
                  orderId: scope.row.orderId
                }
              }">
                <el-button type="text">详情</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="已取消" name="statusThree">
      <div v-if="ThreeData.length === 0">
        <el-empty description="暂无更多订单信息"></el-empty>
      </div>
      <div v-else>
        <el-table
            :data="ThreeData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe>

          <el-table-column
              prop="orderId"
              label="订单号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="posPhone"
              label="联系电话"
              width="150"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="porName"
              label="收件人"
              width="120"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="createDate"
              label="创建日期"
              width="200">
            <template slot-scope="scope">
              <el-text>{{scope.row.createDate | dateFilter}}</el-text>
            </template>
          </el-table-column>

          <el-table-column
              prop="icon"
              label="操作">

            <template slot-scope="scope">
              <router-link :to="{
                path: '/mew/orderdetail',
                query: {
                  orderId: scope.row.orderId
                }
              }">
                <el-button type="text">详情</el-button>
              </router-link>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { orderStatus, change} from "@/api/mew";

export default {
  name: "OrderStatus",
  data() {
    return {
      statusOne: true,
      statusTwo: false,
      statusThree: false,
      OneData: [],
      TwoData: [],
      ThreeData: []
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    changePage(){
      if (name.name === 'statusOne') {
        this.statusOne = true
        this.statusTwo = false
        this.statusThree = false
      } else if (name.name === 'statusTwo') {
        this.statusOne = false
        this.statusTwo = false
        this.statusThree = true
      } else if (name.name === 'statusThree') {
        this.statusOne = false
        this.statusTwo = false
        this.statusThree = true
      }
    },
    getTableData(){
      orderStatus(2).then(res =>{
        this.OneData = res.data.data
      })
      orderStatus(3).then(res =>{
        this.TwoData = res.data.data
      })
      orderStatus(4).then(res =>{
        this.ThreeData = res.data.data
      })
    },
    changeStatus(orderId, status){
      change(orderId, status).then(res =>{
        this.$message.success(res.data.data)
      })
    }
  }
}
</script>

<style scoped>

</style>